<!-- 
搜索弹出框页面
 * @Author: zuobufan
 * @Location: 安庆石化信息中心
 * @LastEditors: zuobufan
 * @LastEditTime: 2021-09-16 13:34:00
 -->
<template>
  <div class="search-popup">
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeholderVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput" 
    />
    <!-- @input="onInput" 表示输入框内容发生变化时触发这个函数 -->
    <!-- 搜索框历史记录 -->
    <HistoryHot
      v-if="blockShow==1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    />
    <!-- 搜索框热门搜索 -->
    <SearchTipsList v-else-if="blockShow == 2" :searchTipsListData="searchTipsListData" @ListClick="ListClick" />
    <!-- 搜索框的产品内容展示 -->
    <SearchProducts v-else
        :filterCategory="filterCategory"
        :goodsList="goodsList"
        @categoryChange="categoryChange"
        @priceChange="priceChange"
    />
  </div>
</template>

<script>
import HistoryHot from "@/components/HistoryHot";
import SearchTipsList from "@/components/SearchTipsList";
import SearchProducts from "@/components/SearchProducts";
import { GetSearchPopupData,GetSearchTipsListData,GetGoodsListData } from "@/request/api";
export default {
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProducts
  },
  data() {
    return {
      searchVal: "", //搜索文字，也就是用户输入的文本
      placeholderVal: "", //默认的占位符文本
      blockShow: 1, //blockShow的值可以为1或2或3  为1，表示展示历史记录 为2，表示展示搜索提示的列表 为3，表示搜索的产品内容
      historyKeywordList: [], //历史记录的列表数据
      hotKeywordList: [], //热门搜索的列表数据
      searchTipsListData:[],//搜索实时提示的列表数据
      filterCategory:[],//搜索产品内容的分类数据
      goodsList:[], //产品内容数据
      order:"desc", //价格排序
      categoryId:0, //分类id
      sort:'id', //默认的搜索方式 是id 还是price

    };
  },
  created() {
    GetSearchPopupData().then(res => {
      console.log(res);
      if (res.errno == 0) {
        this.placeholderVal = res.data.defaultKeyword.keyword;
        this.historyKeywordList = res.data.historyKeywordList;
        this.hotKeywordList = res.data.hotKeywordList;
      }
    });
  },
  methods: {
    ListClick(item){
      this.searchVal = item;
      this.onSearch(item)
    },
    tagClick(val){
        this.searchVal = val;
        this.onSearch(val)
    },
    priceChange(value){
        this.order = value;
        this.sort = 'price';
        this.onSearch(this.searchVal)
    },
    categoryChange(value){
        this.categoryId = value;
        this.onSearch(this.searchVal);
    },
    onSearch(val) {
        this.blockShow = 3;
        console.log(val);
        GetGoodsListData({
            keyword:val,
            page:1,
            size:10,
            order:this.order,
            categoryId:this.categoryId,
            sort:this.sort

            }).then(res =>{
            console.log(res);
            if(res.errno == 0){
                // this.filterCategory = res.data.filterCategory;
                // this.goodsList = res.data.goodsList;
                let { filterCategory,goodsList } = res.data;
                this.filterCategory = filterCategory;
                this.goodsList = goodsList;

                let newArr = JSON.parse(JSON.stringify(filterCategory).replace(/name/g,'text').replace(/id/g,'value'))
                this.filterCategory = newArr;
            }
            
        })
    },
    onCancel() {
      // this.$router.push("/home");
      this.$router.go(-1);
    },
    onInput(val){
        this.blockShow = 2;
        console.log(val);
        GetSearchTipsListData({keyword:val}).then(res =>{
            if(res.errno == 0){
                console.log(res);
                    this.searchTipsListData = res.data;
                }
                
            })
    }
  }
};
</script>
<style lang="less" scoped>
.search-popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  // background-color: rgba(0,0,0,.5);
  background-color: #efefef;
  overflow: auto;
  z-index: 999;
}
</style>